<script>
export default {
  name: "SampleList",
  data() {
    return {
      nameFilter: "",
      students: [
        {id: 1, name: "A1", editFlag: false},
        {id: 2, name: "A2", editFlag: false},
        {id: 3, name: "A3", editFlag: false},
        {id: 4, name: "A4", editFlag: false},
        {id: 5, name: "A5", editFlag: false},
      ],
      stuList:[]
    }
  },
  mounted() {
    this.stuList = this.students;
  },
  methods: {
    edit(index) {
      this.students[index].editFlag = !this.students[index].editFlag;
    },
    filterName() {
      if (this.nameFilter === "") {
        this.stuList = this.students;
      } else {
        this.stuList = this.students.filter(student => {
          return student.name.includes(this.nameFilter);
        })
      }
    }
  },
  // computed: {
  //   studentsList() {
  //     if (this.nameFilter === "") {
  //       return this.students;
  //     }
  //     return this.students.filter(student => {
  //       return student.name.contain(this.nameFilter);
  //     })
  //   }
  // }
}
</script>

<template>
  <div>
    <h1>Vue List Sample</h1>
    <div>filter: <input v-model="nameFilter" placeholder="input name to filter" @keyup.enter="filterName" @blur="filterName"> </div>
    <div v-for="(item, index) in stuList" :key="index">
      {{ index }} :
      <input v-model="students[index].name" v-if="item.editFlag" @keyup.enter="edit(index)" @blur="edit(index)">
      <span v-else>{{ item.name }}</span>
      <button @click="edit(index)">edit</button>
    </div>
  </div>
</template>

<style scoped>

</style>
